<template>
	<div class="data-records">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">数据记录</span>
				<img src="../assets/images/icon-close.png" @click="cancel">
			</div>
            <div class="content">
                <div class="theader justify-content-between">
                    <div class="w1000">序号</div>
                    <div class="w3000">具体测试</div>
                    <div class="w3000">数据记录</div>
                    <div class="w3000">单位</div>
                </div>
                <div class="tbodys" v-if="data">
                    <div class="tbody justify-content-between" v-for="(item, index) in data">
                        <div class="w1000">{{index+1}}</div>
                        <div class="w3000">{{item.dataItem}}</div>
                        <div class="w3000">{{item.dataVal}}</div>
                        <div class="w3000">{{item.dataUnit}}</div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'DataRecordsView',
    props: {
        data: Array //数据记录数据
    },
    data () {
        return {
        	
        }
    },
    methods: {
    	// 关闭弹窗
    	cancel() {
    		this.$emit('cancel');
    	}
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .data-records {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 828rem;height: 499rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 25rem 0 40rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
            .content {width: 100%;padding: 14rem 40rem 0;
                .theader {width: 100%;height: 36rem;background: #F4F5F8;border: 1px solid #D0D6E3;border-radius: 3rem;padding: 0 0 0 15rem;margin-top: 7rem;
                    .triangle {width: 0;height: 0;border-top: 8rem solid #505971;border-left: 8rem solid transparent;border-right: 8rem solid transparent;margin-left: 5rem;}
                }
                .theader > div {text-align: center;font-size: 18rem;color: #505971;}
                .tbodys {width: 100%;max-height: 315rem;overflow-y: scroll;}
                .tbodys::-webkit-scrollbar {display: none;}
                .tbodys {scrollbar-width: none;-ms-overflow-style: none;overflow-x: hidden;overflow-y: auto;}
                .tbody {width: 100%;min-height: 42rem;border: 1px solid #D0D6E3;border-radius: 3rem;font-size: 18rem;color: #161D2E;margin-top: 3rem;padding: 0 0 0 15rem;text-align: center;}
                .w1000 {width: 10%;}
                .w6000 {width: 60%;}
                .w3000 {width: 30%;}
            }
		}
	}
</style>